<template>
	<view class="login_phone">
		<u-navbar title="登录" :autoBack="true" placeholder />
		<view class="content">
			<h3 style="text-align: center;">手机号登录</h3>
			<view style="margin-top: 20rpx;">
				<u--input placeholder="请输入手机号" placeholderStyle="color:#4f63e7;font-size:30rpx" prefixIcon="phone"
					customStyle="height:80rpx;" prefixIconStyle="color:#4f63e7;font-size:40rpx" fontSize="30rpx"
					shape="circle" v-model="mobile" size="small"></u--input>
			</view>
			<view style="margin-top: 20rpx;">

				<u-toast ref="uToast"></u-toast>
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
				<view style="margin-bottom: 20rpx;">
					<u-button type="primary" :text="tips" size="small" @click="getCheckCode"></u-button>
				</view>
				<u-code-input :value="checkCode" mode="line" :maxlength="4" @change="inputCheckCode"></u-code-input>
			</view>

			<view style="width: 30%;margin: 20rpx auto;">

				<u-button type="primary" text="登录" size="large" @click="login"></u-button>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
	} from "vue"
	import {
		useUserStore
	} from "@/stores/userStore.js"
	const userStore = useUserStore();
	const {
		proxy
	} = getCurrentInstance();

	let mobile = ref('')
	const seconds = ref(60)
	let tips = ref('')
	let checkCode = ref('')

	function start() {

	}


	function checkPhone(mobile) {
		mobile = mobile + '';
		var tel = /^0\d{2,3}-?\d{7,8}$/;
		var phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

		if (mobile.length === 11) { //手机号码
			if (phone.test(mobile)) {
				return true;
			}
		} else if (mobile.length === 12 && mobile.indexOf("-") !== -1) {
			if (tel.test(mobile)) {
				return true;
			}
		}
		return false;
	}
	//验证码变化
	function inputCheckCode(e) {
		checkCode.value = e
	}

	function end() {

	}
	//获取验证码
	function getCheckCode() {
		proxy.$nextTick(async () => {
			if (checkPhone(mobile.value)) {

				if (proxy.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					// await userStore.getCode({
					// 	phone: mobile.value
					// })
					uni.showLoading({
						title: '正在获取验证码'
					})

					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						proxy.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			} else {
				uni.showToast({
					title: '手机号格式不对',
					duration: 1000,
					mask: true
				});
			}
		})


	}

	function codeChange(text) {
		tips.value = text;
	}
	//登录
	async function login() {
		console.log(checkCode.value)
		if (!checkPhone(mobile.value)) {
			uni.showToast({
				title: '手机号格式不对',
				duration: 500,
				mask: true
			});
			return;
		}
		if (checkCode.value.length != 4) {
			uni.showToast({
				title: '请输入四位验证码',
				duration: 500,
				mask: true
			});
			return;
		}
		//模拟登录
		await userStore.login({
			phone: mobile.value,
			smsCode: checkCode.value
		})
		if (userStore.msg.type == "success") {
			uni.setStorageSync("user", "华兴")

			uni.switchTab({
				url: "/pages/my/my"
			})
		} else {
			uni.showToast({
				title: "信息错误",
				mask: true,
				duration: 500
			})
		}
	}
</script>

<style lang="scss">
	.login_phone {
		background: url("/static/images/login.jpg") no-repeat center bottom fixed;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		.content {
			display: flex;
			flex-direction: column;
			width: 90%;
			height: 800rpx;
			margin: 30rpx auto;
			padding: 30rpx;
			padding-top: 50rpx;
			box-shadow: 20rpx 20rpx 20rpx 20rpx rgba(0, 0, 0, 0.2);
			background-color: rgba(255, 255, 255, 0.9);
			font-size: 35rpx;
			border-radius: 20rpx;
		}
	}
</style>